<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可视化网站</title>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/c/font_4695491_9jrttn5io84.css"
    />
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/c/font_4697017_n7urneyh2ss.css"
    />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./js/flexible.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/china.js"></script>
    <style>
      div {
        color: #5381e5;
      }
    </style>
  </head>
  <body>
    <div class="viewport">
      <div class="column">
        <!--概览-->
        <div class="column1_overview">
          <div class="item">
            <h3>2,899</h3>
            <p>
              <i
                class="iconfont icon-yuanjiaojuxing"
                style="color: rgb(39, 102, 238)"
              ></i>
              <span> 设备总数 </span>
            </p>
          </div>
          <div class="item">
            <h3>199</h3>
            <p>
              <i
                class="iconfont icon-yuanjiaojuxing"
                style="color: rgb(49, 227, 58)"
              ></i>
              <span> 季度新增 </span>
            </p>
          </div>
          <div class="item">
            <h3>3,001</h3>
            <p>
              <i
                class="iconfont icon-yuanjiaojuxing"
                style="color: rgb(105, 249, 27)"
              ></i>
              <span> 运营设备 </span>
            </p>
          </div>
          <div class="item">
            <h3>108</h3>
            <p>
              <i class="iconfont icon-yuanjiaojuxing" style="color: red"></i>
              <span> 异常设备 </span>
            </p>
          </div>
        </div>
        <!--监控-->
        <div class="column1_monitor">
          <div class="title">故障设备监控</div>
          <div class="scoll-title">
            <span>故障时间</span>
            <span>设备地址</span>
            <span>异常代码</span>
          </div>
          <div class="scoll-box">
            <ul>
              <li>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000001</li>
            </ul>
            <ul>
              <li>31323301</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000002</li>
            </ul>
            <ul>
              <li>54690701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000003</li>
            </ul>
            <ul>
              <li>90190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000004</li>
            </ul>
            <ul>
              <li>70190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000005</li>
            </ul>
            <ul>
              <li>00190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000006</li>
            </ul>
            <ul>
              <li>50190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000007</li>
            </ul>
            <ul>
              <li>00190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000008</li>
            </ul>
            <ul>
              <li>40190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>1000009</li>
            </ul>
            <ul>
              <li>20190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>2000001</li>
            </ul>
            <ul>
              <li>65190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>2000002</li>
            </ul>
            <ul>
              <li>68190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>2000003</li>
            </ul>
            <ul>
              <li>90190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>2000004</li>
            </ul>
            <ul>
              <li>80190701</li>
              <li>北京市昌平区建材城西路金燕龙写字楼</li>
              <li>2000005</li>
            </ul>
          </div>
        </div>
        <!--点位-->
        <div class="column1_point">
          <div class="title">点位分布统计</div>
          <div class="echartbox">
            <div class="echart"></div>
            <div class="navtext">
              <h3>320,11</h3>
              <p>
                <i class="iconfont icon-yuanjiaojuxing" style="color: red"></i>
                <span> 点位总数 </span>
              </p>
              <h3>320,11</h3>
              <p>
                <i
                  class="iconfont icon-yuanjiaojuxing"
                  style="color: yellow"
                ></i>
                <span> 点位总数 </span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!--地图-->
        <div class="column2_map">
          <div class="title">设备数据统计</div>
          <div class="echart"></div>
        </div>
        <!--用户-->
        <div class="column2_column">
          <div class="title">全国用户总量统计</div>
          <div class="echartbox">
            <div class="echart"></div>
            <div class="navtext">
              <h3>120,899</h3>
              <p>
                <i class="iconfont icon-yuanjiaojuxing" style="color: red"></i>
                <span> 用户总数 </span>
              </p>
              <h3>248</h3>
              <p>
                <i
                  class="iconfont icon-yuanjiaojuxing"
                  style="color: yellow"
                ></i>
                <span> 本月新增 </span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!--订单-->
        <div class="column3_orderGoods">
          <ul>
            <li>365天</li>
            <li>90天</li>
            <li>30天</li>
            <li>24小时</li>
          </ul>
          <div>
            <div class="item">
              <h3 id="one">21421</h3>

              <p>
                <i
                  class="iconfont icon-yuanjiaojuxing"
                  style="color: rgb(238, 39, 39)"
                ></i>
                <span>订单量</span>
              </p>
            </div>
            <div class="item">
              <h3 id="two">9899</h3>
              <p>
                <i
                  class="iconfont icon-yuanjiaojuxing"
                  style="color: rgb(243, 238, 100)"
                ></i>
                <span> 销售额(万元) </span>
              </p>
            </div>
          </div>
        </div>
        <!--销售-->
        <div class="column3_salesVolume">
          <div class="title">
            <span>销售额统计</span>
            <span class="line">|</span>
            <ul>
              <li data-id="0">年</li>
              <li data-id="1">季</li>
              <li data-id="2">月</li>
              <li data-id="3">周</li>
            </ul>
          </div>
          <div class="echart"></div>
        </div>
        <div class="column3_channelSales">
          <!--渠道-->
          <div class="channelSales_box box1">
            <div class="title">渠道分布</div>
            <div class="echart"></div>
          </div>
          <!--季度-->
          <div class="channelSales_box box2">
            <div class="title">一季度销售进度</div>
            <div class="echart"></div>
            <div class="text">
              <div class="item">
                <h3>1,321</h3>
                <p>
                  <i
                    class="iconfont icon-yuanjiaojuxing"
                    style="color: rgb(94, 227, 70)"
                  ></i>
                  <span> 销售额(万元) </span>
                </p>
              </div>
              <div class="item">
                <h3>150%</h3>
                <p>
                  <i
                    class="iconfont icon-yuanjiaojuxing"
                    style="color: rgb(240, 53, 53)"
                  ></i>
                  <span> 同比增长 </span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <!--排行-->
        <div class="column3_rank">
          <div class="title">
            <span>全国热榜</span>
            <span>各省热销</span>
          </div>
          <div class="context">
            <div class="col1">
              <li>
                <i class="iconfont icon-jiangbei" style="color: #df3737"></i>
                <span>可爱多</span>
              </li>
              <li>
                <i class="iconfont icon-jiangbei" style="color: #50deee"></i>
                <span>哇哈哈</span>
              </li>
              <li>
                <i class="iconfont icon-jiangbei" style="color: #3e8ad5"></i>
                <span>喜之郎</span>
              </li>
            </div>
            <div class="col2">
              <ul>
                <li>北京</li>
                <li>河北</li>
                <li>上海</li>
                <li>江苏</li>
                <li>山东</li>
              </ul>
              <ul>
                <li>
                  <span>23,424</span>
                  <i
                    class="iconfont icon-xiangshangjiantoucuxiao"
                    style="color: #df3737"
                  ></i>
                </li>
                <li>
                  <span>23,424</span>
                  <i
                    class="iconfont icon-xiangxiajiantoucuxiao"
                    style="color: #50deee"
                  ></i>
                </li>
                <li>
                  <span>23,424</span>
                  <i
                    class="iconfont icon-xiangshangjiantoucuxiao"
                    style="color: #df3737"
                  ></i>
                </li>
                <li>
                  <span>23,424</span>
                  <i
                    class="iconfont icon-xiangxiajiantoucuxiao"
                    style="color: #50deee"
                  ></i>
                </li>
                <li>
                  <span>23,424</span>
                  <i
                    class="iconfont icon-xiangshangjiantoucuxiao"
                    style="color: #df3737"
                  ></i>
                </li>
              </ul>
            </div>
            <div class="col2">
              <ul>
                <li>可爱多</li>
                <li>哇哈哈</li>
                <li>喜之郎</li>
                <li>八喜</li>
                <li>小洋人</li>
                <li>好多鱼</li>
              </ul>
              <ul>
                <li>
                  <span>2424</span>
                  <i
                    class="iconfont icon-xiangshangjiantoucuxiao"
                    style="color: #df3737"
                  ></i>
                </li>
                <li>
                  <span>2324</span>
                  <i
                    class="iconfont icon-xiangxiajiantoucuxiao"
                    style="color: #50deee"
                  ></i>
                </li>
                <li>
                  <span>2424</span>
                  <i
                    class="iconfont icon-xiangshangjiantoucuxiao"
                    style="color: #df3737"
                  ></i>
                </li>
                <li>
                  <span>2324</span>
                  <i
                    class="iconfont icon-xiangxiajiantoucuxiao"
                    style="color: #50deee"
                  ></i>
                </li>
                <li>
                  <span>2424</span>
                  <i
                    class="iconfont icon-xiangxiajiantoucuxiao"
                    style="color: #50deee"
                  ></i>
                </li>
                <li>
                  <span>23,424</span>
                  <i
                    class="iconfont icon-xiangshangjiantoucuxiao"
                    style="color: #df3737"
                  ></i>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 地图 -->
    <script src="./js/map.js"></script>
    <!-- 扇形图 -->
    <script src="./js/fanchart.js"></script>
    <!-- 柱状图 -->
    <script src="./js/columnchart.js"></script>
    <!-- 雷达图 -->
    <script src="./js/radar.js"></script>
    <!-- 仪表盘 -->
    <script src="./js/dashboard.js"></script>
    <!-- 折线图 -->
    <script src="./js/linechart.js"></script>
    <!-- 其他js -->
    <script src="./js/index.js"></script>
  </body>
</html>
